﻿<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>流程图DEMO</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/scripts/gooflow1.3/codebase/GooFlow.css" />
    <script type="text/javascript" src="/scripts/gooflow1.3/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/gooflow1.3/codebase/GooFunc.js"></script>
    <script type="text/javascript" src="/scripts/gooflow1.3/plugin/json2.js"></script>
    <link href="../../scripts/layui/formSelects-v4.css" rel="stylesheet" />
    <script type="text/javascript" src="/scripts/gooflow1.3/codebase/GooFlow.js"></script>
    <script type="text/javascript" src="/scripts/gooflow1.3/codebase/GooFlow.color.js"></script>

    <script src="../../scripts/layui/layui.all.js"></script>
    <script src="../../scripts/layui/formSelects-v4.min.js"></script>

    <style>
        .layui-input, .layui-select, .layui-textarea {
            height: 20px;
            min-width: 150px;
            line-height: 18px\9;
        }
    </style>
    <script type="text/javascript">
        var property = {
            width: 1072,
            height: 600,
            //toolBtns: ["start round mix", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
            toolBtns: ["start round mix", "end round", "node", "join", "fork"],
            haveHead: true,
            headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，则定义HEAD区的按钮
            haveTool: true,
            haveGroup: true,
            useOperStack: true
        };
        var remark = {
            //cursor: "选择指针",
            //direct: "结点连线",
            //start: "入口结点",
            //"end": "结束结点",
            //"task": "任务结点",
            //node: "自动结点",
            //chat: "决策结点",
            //state: "状态结点",
            //plug: "附加插件",
            //fork: "分支结点",
            //"join": "联合结点",
            //"complex mix": "复合结点",
            //group: "组织划分框编辑开关"

            cursor: "选择指针",
            direct: "转换连线",
            dashed: "关联虚线",
            start: "开始结点",
            end: "结束结点",
            task: "任务结点",
            node: "自动结点",
            chat: "决策结点",
            state: "状态结点",
            plug: "附加插件",
            fork: "分支结点",
            join: "联合结点",
            complex: "复合结点",
            group: "组织划分框编辑开"


        };
        var demo;
        $(document).ready(function () {
            demo = $.createGooFlow($("#demo"), property);
            demo.setNodeRemarks(remark);
            demo.onItemDel = function (id, type) {
                if (confirm("确定要删除该单元吗?")) {
                    this.blurItem();
                    return true;
                } else {
                    return false;
                }
            }
            //demo.loadData(jsondata);初始化时加载flow数据
            demo.onItemFocus = function (id, model) {
                formSelects.value('select8', []);          //赋值空数组, 清空所有
                var obj;
                $("#ele_model").val(model);
                $("#ele_id").val(id);
                if (model == "line") {
                    obj = this.$lineData[id];
                    $("#ele_type").val(obj.M);
                    $("#ele_left").val("");
                    $("#ele_top").val("");
                    $("#ele_width").val("");
                    $("#ele_height").val("");
                    $("#ele_from").val(obj.from);
                    $("#ele_to").val(obj.to);
                } else if (model == "node") {
                    obj = this.$nodeData[id];
                    $("#ele_type").val(obj.type);
                    $("#ele_left").val(obj.left);
                    $("#ele_top").val(obj.top);
                    $("#ele_width").val(obj.width);
                    $("#ele_height").val(obj.height);
                    $("#ele_from").val("");
                    $("#ele_to").val("");
                    if (obj.setInfo !== undefined) {
                        $("#Description").val(obj.setInfo.Description);
                        console.log("setInfo节点值是：" + JSON.stringify(obj.setInfo));
                        formSelects.value('select8', obj.setInfo.NodeDesignateData.users, true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
                    }

                }
                
                $("#ele_name").val(obj.name);
                $("#NodeName").val(obj.name);//节点名称
                $("#NodeCode").val(obj.name);//节点标识
                return true;
            };
            demo.onItemBlur = function (id, model) {
                //点击的时候重置表单
                document.getElementById("propertyForm").reset();

                return true;
            };


            //导出数据扩展方法
            //所有节点必须有进出线段
            //必须有开始结束节点（且只能为一个）
            //分流合流节点必须成对出现
            //分流合流节点必须一一对应且中间必须有且只能有一个普通节点
            //分流节点与合流节点之前的审核节点必须有且只能有一条出去和进来节点
            demo.exportDataEx = function () {
                var data = demo.exportDataNew();
                console.log("data:" + JSON.stringify(data));
                var fromlines = {},
                    tolines = {},
                    nodes = {},
                    fnodes = [],   //会签分流节点
                    hnodes = [],  //会签合流节点
                    startroundFlag = 0,   //开始节点标识
                    endroundFlag = 0;   //结束节点标识
                for (var i in data.lines) {
                    if (fromlines[data.lines[i].from] == undefined) {
                        fromlines[data.lines[i].from] = [];
                    }
                    fromlines[data.lines[i].from].push(data.lines[i].to);

                    if (tolines[data.lines[i].to] == undefined) {
                        tolines[data.lines[i].to] = [];
                    }
                    tolines[data.lines[i].to].push(data.lines[i].from);
                }
                for (var j in data.nodes) {

                    var _node = data.nodes[j];
                    //console.log("_node:" + JSON.stringify(_node));
                    var _flag = false;
                    switch (_node.type) {
                        case "start round mix":
                            startroundFlag++;
                            if (fromlines[_node.id] == undefined) {
                                //alert(JSON.stringify(data));
                                layer.msg("开始节点无法流转到下一个节点");
                                return -1;
                            }
                            break;
                        case "end round":
                            endroundFlag++;
                            if (tolines[_node.id] == undefined) {
                                layer.msg("无法流转到结束节点");
                                return -1;
                            }
                            break;
                        case "node":
                            if (_node.setInfo == null) {
                                layer.msg("请设置节点【" + _node.name + "】操作人员");
                                return -1;
                            }
                            _flag = true;
                            break;
                        case "fork":
                            _flag = true;
                            fnodes.push(_node.id);
                            break;
                        case "join":
                            hnodes.push(_node.id);
                            _flag = true;
                            break;
                        default:
                            layer.msg("节点数据异常！+node.type:" + _node.type);
                            return -1;
                            break;
                    }
                    nodes[_node.id] = _node;
                }
                if (startroundFlag == 0) {
                    layer.msg("必须有开始节点");
                    return -1;
                }

                if (endroundFlag == 0) {
                    layer.msg("必须有结束节点");
                    return -1;
                }

                if (fnodes.length != hnodes.length) {
                    layer.msg("分流节点必须等于合流节点");
                    return -1;
                }
                return data;
            }
            demo.SetNodeEx = function (id, data) {
                //注意这里用了setNameNew的新方法
                demo.setNameNew(id, data.NodeName, "node", data);
            }
            demo.SetLineEx = function (id, data) {
                demo.setName(id, data.LineName, "line", data);
            }
            //把双击扩展方法取消 源用系统双击事件
            //demo.onItemDbClick = function (id, type) {
            //    var obj = demo.getItemInfo(id, type);
            //    switch (type) {
            //        case "node":
            //            alert("node");
            //            break;
            //        case "line":
            //            alert("line");
            //            break;
            //    }
            //    return false;
            //}


        });
        var out;
        function Export() {
            if (demo.exportDataEx() == -1) {
                return false;
            } else {
                document.getElementById("result").value = JSON.stringify(demo.exportDataEx());
            }


        }
        //回填flow数据
        function loadData(jsondata) {
            demo.loadDataNew(jsondata); //初始化时加载flow数据
            console.log("回填数据成功" + jsondata);
        }
        function setTitle(title) {
            demo.$title = title;
        }

        function setNode() {
            if ($("#ele_id").val() == '') {
                layer.msg("请选中元素再设置！");
                return false;
            }


            var s = '{"NodeDesignateData":{"users":[],"roles":[],"orgs":[]},"NodeName":"","NodeCode":"","NodeRejectType":"","NodeDesignate":"","Description":""}';//先给一个搜索的空的模板
            var o = JSON.parse(s);//把文本转换为json obj
            o.NodeName = $("#NodeName").val();
            o.NodeCode = $("#NodeName").val();
            o.NodeRejectType = $("#NodeRejectType option:selected").val();
            o.NodeDesignate = $("#NodeDesignate option:selected").val();
            o.Description = $("#Description").val();//备注
            if (o.NodeDesignate === "SPECIAL_USER") {//指定用户
                var us = formSelects.value('select8', 'val');//["2","4"]
                o.NodeDesignateData.users=us;//把指定用户加进去  这里如果用push赋值会变成users:[["2","4"]]
                if (o.NodeDesignateData.users == null || o.NodeDesignateData.users == undefined || o.NodeDesignateData.users=="") {
                    layer.msg("请指定执行人！");
                }
            }
            else if (o.NodeDesignate === "SPECIAL_ROLE") {//指定角色
                rolestree.load();
                ztree.reload();
            }
     

            demo.SetNodeEx($("#ele_id").val(), o);
            console.log("设置的值是:" + JSON.stringify(o));
            demo.$focus;
            //    nodedata:{"NodeDesignateData":{"users":["6ba79766-faa0-4259-8139-a4a6d35784e0","49df1602-f5f3-4d52-afb7-3802da619558","de8be521-f1ec-4483-b124-0be342890507","de8be521-f1ec-4483-b124-0be342890507"],"roles":[],"orgs":[]},"NodeName":"开单","NodeCode":"开单","NodeRejectType":"2","NodeDesignate":"SPECIAL_USER","Description":"11111"}
            //flowDesignPanel.SetNodeEx(object.id, nodedata);
            //指定角色
            //nodedata:{"NodeDesignateData":{"users":[],"roles":["77e6d0c3-f9e1-4933-92c3-c1c6eef75593"],"orgs":[]},"NodeName":"名称","NodeCode":"标识","NodeRejectType":"3","NodeDesignate":"SPECIAL_ROLE","Description":"备注"}
            //所有人
            //{"NodeDesignateData":{"users":[],"roles":[],"orgs":[]},"NodeName":"名称","NodeCode":"标识","NodeRejectType":"3","NodeDesignate":"ALL_USER","Description":"备注"}
        }

    </script>
</head>
<body style="background:#EEEEEE">
    <div id="demo" style="margin:5px;float:left"></div>



    <div class="" style="width:250px;float:left">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>属性设置</legend>
        </fieldset>
        <form class="myForm" id="propertyForm">
            <table class="">
                <tr style="display:;"><td class="th">Id：</td><td><input type="text" readonly class="layui-input" style="width:120px" id="ele_id" /></td></tr>
                <tr style="display:;"><td class="th">Name：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_name" /></td></tr>
                <tr style="display:;"><td class="th">类型：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_type" /></td></tr>
                <tr style="display:;"><td class="th">Model：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_model" /></td></tr>
                <tr style="display:;"><td class="th">Left-r：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_left" /></td></tr>
                <tr style="display:;"><td class="th">Top-r：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_top" /></td></tr>
                <tr style="display:;"><td class="th">宽：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_width" /></td></tr>
                <tr style="display:;"><td class="th">高：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_height" /></td></tr>
                <tr style="display:;"><td class="th">From：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_from" /></td></tr>
                <tr style="display:;"><td class="th">To：</td><td><input type="text" class="layui-input" style="width:120px" id="ele_to" /></td></tr>
                <tr><td class="th">节点标识：</td><td><input type="text" class="layui-input" style="width:120px" id="NodeCode" /></td></tr>
                <tr><td class="th">节点名称：</td><td><input type="text" class="layui-input" style="width:120px" id="NodeName" /></td></tr>
                <tr>
                    <td class="th">驳回类型：</td>
                    <td>

                        <select id="NodeRejectType" class="layui-input" name="NodeRejectType" required lay-verify="required">
                            <option value="0">上一步</option>
                            <option value="1">第一步</option>
                            <option value="2">指定步骤</option>
                            <option value="3">不处理</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td class="th">执行人：</td>
                    <td>

                        <select id="NodeDesignate" class="layui-input" name="NodeDesignate">
                            <option value="SPECIAL_USER">指定用户</option>
                            <option value="ALL_USER">所有用户</option>
                            <option value="SPECIAL_ROLE">指定角色</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td class="th"></td>
                    <td>
                        <select name="city" xm-select="select8" xm-select-search=""></select>
                    </td>
                </tr>
                <tr><td class="th">备注：</td><td><input type="text" class="layui-input" style="width:120px" id="Description" /></td></tr>
            </table>
        </form>
        <br />
        <input type="button" class="layui-btn layui-btn-primary layui-btn-sm" value="设置" onclick="setNode();" />
    </div>
    <!--

        -->



    <div style="clear:both;display:none;">
        <input id="submit" type="button" value='导出结果' onclick="Export()" />
<textarea id="result" row="6"></textarea>
    </div>
    <script>
        /**
        * 1.配置远程搜索, 请求头, 请求参数, 请求类型等
        *
        * formSelects.config(ID, Options, isJson);
        *
        * @param ID        xm-select的值
        * @param Options   配置项
        * @param isJson    是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8
        */
        var formSelects = layui.formSelects;
        formSelects.config('select8', {
            type: 'post',                //请求方式: post, get, put, delete...
            header: {},                 //自定义请求头
            data: {},                   //自定义除搜索内容外的其他数据
            searchUrl: '/api/api.ashx?action=layui-sysusers', //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
            searchName: 'keyword',      //自定义搜索内容的key值
            searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
            keyName: 'name',            //自定义返回数据中name的key, 默认 name
            keyVal: 'value',            //自定义返回数据中value的key, 默认 value
            keySel: 'selected',         //自定义返回数据中selected的key, 默认 selected
            keyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabled
            keyChildren: 'children',    //联动多选自定义children
            delay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
            direction: 'auto',          //多选下拉方向, auto|up|down
            response: {
                statusCode: 0,          //成功状态码
                statusName: 'code',     //code key
                msgName: 'msg',         //msg key
                dataName: 'data'        //data key
            },
            success: function (id, url, searchVal, result) {      //使用远程方式的success回调
                console.log(id);        //组件ID xm-select
                console.log(url);       //URL
                console.log(searchVal); //搜索的value
                console.log(result);    //返回的结果
            },
            error: function (id, url, searchVal, err) {           //使用远程方式的error回调
                //同上
                console.log(err);   //err对象
            },
            beforeSuccess: function (id, url, searchVal, result) { //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧















                console.log(id)
                    ;        //组件ID xm-select
                console.log(url);       //URL
                console.log(searchVal); //搜索的value
                console.log(result);    //返回的结果

                return result;  //必须return一个结果, 这个结果要符合对应的数据结构
            },
            beforeSearch: function (id, url, searchVal) {         //搜索前调用此方法, return true将触发搜索, 否则不触发
                if (!searchVal) {//如果搜索内容为空,就不触发搜索
                    return false;
                }
                return true;
            },
            clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
        }, false);
        formSelects.data('select8', 'server', {
            url: '/api/api.ashx?action=layui-sysusers',
            keyword: ''
        });
        formSelects.on('select8', function (id, vals, val, isAdd, isDisabled) {
            //id:           点击select的id
            //vals:         当前select已选中的值
            //val:          当前select点击的值



            //isAdd:        当前操作选中or取消
            //isDisabled:   当前选项是否是disabled
            console.log("当前select已选中的值" + formSelects.value('select8', 'valStr')); // 2,4

        }, true);

    </script>
</body>
</html>
